<template>
  <div id="app">
   <MyTable :records="records" @DetailShow="changeDetail" @selected="selected"/>
   <TableDetail v-if="DetailShow" @close="DetailShow=$event" :info="records[SelectedIndex]"/>
  </div>
</template>

<script>

import MyTable from './components/MyTable.vue';
import TableDetail from './components/TableDetail.vue';
const AllData = [
  {
    date: '2022-01-01',
    doctor: '张三',
    diagnosis: '感冒',
    prescription: '感冒药',
  },
  {
    date: '2022-02-01',
    doctor: '李四',
    diagnosis: '头疼',
    prescription: '止疼药',
  },
  {
    date: '2022-03-01',
    doctor: '王五',
    diagnosis: '腰痛',
    prescription: '止痛贴',
  }
];
export default {
  name: 'App',
  components: {
    MyTable,
    TableDetail
  },
  data(){
    return{
      records: [
  {
    date: '2022-01-01',
    doctor: '张三',
    diagnosis: '感冒',
    prescription: '感冒药',
  },
  {
    date: '2022-02-01',
    doctor: '李四',
    diagnosis: '头疼',
    prescription: '止疼药',
  },
  {
    date: '2022-03-01',
    doctor: '王五',
    diagnosis: '腰痛',
    prescription: '止痛贴',
  }
],
     DetailShow:false,
     SelectedIndex:-1
    }
  },
  methods:{
    changeDetail(value){
      this.DetailShow = value.Show
      this.SelectedIndex = value.selected
    },
    selected(value){
      this.records = AllData.filter(item => Object.keys(item).some(key => item[key].toString().includes(value)))
    }
  }
}
</script>

<style>

</style>
